<script setup>
  import {computed} from "vue";

  const props = defineProps({
    todos: Array
  })
  const emits = defineEmits(['handleClearAll', 'handleCheckTodo']);

  const handleClearBtn = () => {
    emits('handleClearAll')
  }

  const total = computed(() => props.todos.length)

  const doneTotal = computed(() => {
    return props.todos.reduce((pre, curr) => {
      return pre + (curr.done ? 1 : 0)
    }, 0)
  })

  const isAll = computed({
    get() {
      return doneTotal.value === total.value && total.value > 0
    },
    set(value) {
      emits('handleCheckTodo', value)
    }
  })

</script>

<template>
  <div class="footer" v-show="total">
    <label>
      <input type="checkbox" v-model="isAll"/>
    </label>
      <span>
            <span>已完成 {{doneTotal}} </span> / 全部 {{total}}
        </span>
    <button class="btnClear"
            @click="handleClearBtn"
    >
      清除已完成任务
    </button>
  </div>
</template>

<style scoped>
  .btnClear {
    float: right;
    margin-right: 10px;
    background-color: #ff6700;
    color: white;
    text-align: center;
    border: 0px;
    height: 30px;
    width: 120px;
    border-radius: 5px;
  }
  .footer {
    margin: 20px;
  }
</style>
